<template>
  <div style="padding: 20px">
    <div class="fo-box">
      <div class="fo-title">
        <strong>亮灯总览</strong>
        <el-select
            v-model="current"
            placeholder="Select"
            style="width: 240px"
        >
          <el-option
              v-for="item in [{label:'2024-05',value:0},{label:'2024-04',value:1}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
      <div class="fo-view">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-table :data="lightsTypeData" height="300" :header-cell-style="{color:'#000000'}" border>
              <el-table-column prop="dataTypeName" label="区或"/>
              <el-table-column prop="lightingTotal" label="规上企业"/>
              <el-table-column prop="fiveColorBrightLightsCompanyList" label="红灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="橙灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[1].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[1].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[1].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="黄灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[2].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[2].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[2].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="蓝灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[3].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[3].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[3].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="绿灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[4].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[4].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[4].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="8">
            <el-table :data="lightsCompanyTypeData" height="300" :header-cell-style="{color:'#000000'}" border>
              <el-table-column prop="dataTypeName" label="区或"/>
              <el-table-column prop="lightingTotal" label="规上企业"/>
              <el-table-column prop="fiveColorBrightLightsCompanyList" label="红灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="橙灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[1].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[1].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[1].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="黄灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[2].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[2].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[2].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="蓝灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[3].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[3].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[3].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="绿灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[4].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[4].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[4].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="8">
            <el-table :data="lightsMajorIndustryData" height="300" :header-cell-style="{color:'#000000'}" border>
              <el-table-column prop="dataTypeName" label="区或"/>
              <el-table-column prop="lightingTotal" label="规上企业"/>
              <el-table-column prop="fiveColorBrightLightsCompanyList" label="红灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="橙灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[1].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[1].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[1].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="黄灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[2].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[2].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[2].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="蓝灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[3].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[3].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[3].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="绿灯企业">
                <template #default="scope">
                  <strong
                      style="color: #0b63b7">{{ scope.row.fiveColorBrightLightsCompanyList[4].lightingCount }}</strong>
                  <small style="margin-right: 5px">家</small>
                  <span
                      :style="{color:scope.row.fiveColorBrightLightsCompanyList[4].lightingChangeCount >0?'red':'green'}">
                      {{ scope.row.fiveColorBrightLightsCompanyList[4].lightingChangeCount > 0 ? '↑' : '↓' }}{{ scope.row.fiveColorBrightLightsCompanyList[0].lightingChangeCount }}
                   </span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="fo-box">
      <div class="fo-title">
        <strong>亮灯趋势</strong>
      </div>
      <div style="height: 400px;background-color: #ffffff">
        <lighting-trend></lighting-trend>
      </div>
    </div>
    <div class="fo-box">
      <div style="background-color: #ffffff;padding: 20px">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="产值分析" name="first"></el-tab-pane>
          <el-tab-pane label="企业应缴税金分析" name="second"></el-tab-pane>
          <el-tab-pane label="利润额分析" name="third"></el-tab-pane>
          <el-tab-pane label="销售额分析" name="fourth"></el-tab-pane>
          <el-tab-pane label="用电量分析" name="five"></el-tab-pane>
          <el-tab-pane label="期末员工数分析" name="six"></el-tab-pane>
          <el-tab-pane label="订单量变化分析" name="seven"></el-tab-pane>
        </el-tabs>
        <el-row :gutter="20">
          <el-col :span="9">
            <div class="tj-box">
              <lighting-aalysis></lighting-aalysis>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="tj-box">
              <monitoring-interval></monitoring-interval>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="tj-box">
              <el-table :data="abnormalTrendList" height="500">
                <el-table-column prop="deptName" label="街道"  align="center" />
                <el-table-column prop="count" label="最新年异常数" align="center" >
                  <template #default="scope">
                  <strong style="color: #0b63b7">  {{scope.row.count}}</strong>
                  </template>
                </el-table-column>
                <el-table-column prop="newCount" label="最新月异常数"  align="center">
                  <template #default="scope">
                    <strong style="color: #0b63b7">  {{ scope.row.newCount}}</strong>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import {lightsCompanyTypeList, lightsMajorIndustryList, lightsTypeList,abnormalTrendList} from '../data/data.js'
import {onMounted, ref, watch} from "vue";
import LightingTrend from "@/views/situationalAwareness/Echarts/lightingTrend.vue";
import LightingAalysis from "@/views/situationalAwareness/Echarts/lightingAalysis.vue";
import MonitoringInterval from "@/views/situationalAwareness/Echarts/MonitoringInterval.vue";


const lightsTypeData = ref([])
const lightsCompanyTypeData = ref([])
const lightsMajorIndustryData = ref([])

const current = ref(0)
const activeName = ref('first')




const setCurrent = (index) => {
  current.value = index
  lightsTypeData.value = lightsTypeList[index]
  lightsCompanyTypeData.value = lightsCompanyTypeList[index]
  lightsMajorIndustryData.value = lightsMajorIndustryList[index]
}

watch(current, (newVal) => {
  setCurrent(newVal)
})

onMounted(() => {
  setCurrent(0)
})


</script>

<style scoped lang="scss">
.tj-box {
  height: 540px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.fo-box {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f7f8fa;
}

.fo-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  > strong {
    font-size: 16px;
    border-left: 4px solid #1e87f0;
    padding-left: 10px;
  }
}

.fo-view {
  height: calc(100% - 50px);
}
</style>
